// 引入 Vue 和 Vuex 模块
import Vue from 'vue'
import Vuex from 'vuex'

// 使用 Vuex 插件，让 Vue 支持状态管理
Vue.use(Vuex)

// 创建并导出一个 Vuex Store 实例
export default new Vuex.Store({
  // 状态（state）：存储全局数据，初始化时从 sessionStorage 中读取
  state: {
    // token：用户登录凭证
    token: sessionStorage.getItem("token"),
    
    // userInfo：用户信息对象，存储时是 JSON 字符串，读取时需解析成对象
    userInfo: JSON.parse(sessionStorage.getItem("userInfo")),
    
    // userId：用户唯一标识
    userId: sessionStorage.getItem("userId")
  },

  // 获取器（getters）：用于派生出更易用的状态访问方式
  getters: {
    // 获取用户信息
    getUserInfo: state => {
      return state.userInfo
    },
    
    // 获取 token
    getToken: state => {
      return state.token
    },
    
    // 获取用户 ID
    getUserId: state => {
      return state.userId
    },

    // 获取用户角色
    getUserRole: state => {
      return state.userInfo.role
    }
  },

  // 变更方法（mutations）：同步修改状态，并更新到浏览器会话中
  mutations: {
    // 设置 token 并保存到 sessionStorage
    SET_TOKEN: (state, token) => {
      state.token = token
      sessionStorage.setItem("token", token)
    },

    // 设置用户信息并序列化保存到 sessionStorage
    SET_USERINFO: (state, userInfo) => {
      state.userInfo = userInfo
      sessionStorage.setItem("userInfo", JSON.stringify(userInfo)) // 序列化存入浏览器会话中
    },

    // 设置用户 ID 并保存到 sessionStorage
    SET_USERID: (state, userId) => {
      state.userId = userId
      sessionStorage.setItem("userId", userId)
    },

    // 清除所有用户相关信息
    REMOVE_INFO: (state) => {
      state.token = ''
      state.userInfo = {}
      sessionStorage.removeItem("token")
      sessionStorage.removeItem("userInfo")
      sessionStorage.removeItem("userId")
    }
  },

  // 动作（actions）：用于处理异步操作（如请求 API），当前为空
  actions: {},

  // 模块（modules）：用于将 store 分割为模块，便于大型项目维护，当前未使用
  modules: {}
})